<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>websheet Demo</title>

    <style>
        .hljs-ln-numbers {
            text-align: right;
            color: #7d7d7d;
            padding-right: 15px;
            border-right: 1px solid #555;
        }

        .code-container {
            position: relative;
        }

        .copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 4px 8px;
            background: #f0f0f0;
            border: 1px solid #ccc;
            cursor: pointer;
            border-radius: 4px;
        }

        .copy-btn:hover {
            background: #e0e0e0;
        }
    </style>
    <link href="./dist/monokai-sublime.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./dist/style.css">
</head>

<body>
    <div id='yourElement'>
    </div>

    <div class="code-container">
        <button class="copy-btn">复制</button>



        <pre><code class="language-javascript"  >
    let yourElement = document.getElementById("yourElement");
    let wsheet = new websheet('HTML', yourElement,0,0,800,400);

  
 

    /**
    * 第一步 获取激活的activeSheet
    */
   let activeSheet = wsheet.ActiveSheet();
   let i = 1;
   activeSheet.SetCellValue(3, i, i++);
   activeSheet.SetCellValue(3, i, i++);
   activeSheet.SetCellValue(3, i, i++);
   activeSheet.SetCellValue(3, i, i++);
   activeSheet.SetCellValue(3, i, i++);
   activeSheet.SetCellValue(3, i, i++);
   activeSheet.SetCellValue(3, i, i++);
   activeSheet.SetCellValue(3, i, i++);
   activeSheet.SetCellValue(3, i, i++);
   activeSheet.SetCellValue(3, i, i++);
   let r = 1;
   activeSheet.SetCellValue(r, 3, r++);
   activeSheet.SetCellValue(r, 3, r++);
   activeSheet.SetCellValue(r, 3, r++);
   activeSheet.SetCellValue(r, 3, r++);
   activeSheet.SetCellValue(r, 3, r++);
   activeSheet.SetCellValue(r, 3, r++);
   activeSheet.SetCellValue(r, 3, r++);
   activeSheet.SetCellValue(r, 3, r++);
   activeSheet.SetCellValue(r, 3, r++);
   activeSheet.SetCellValue(r, 3, r++);
   /**
   * 第二步    锁定行列
   */
   //锁定前3行
   // activeSheet.SetFreezeRow(3);
   //锁定前3列
   //activeSheet.SetFreezeCol(3);
   //锁定前C3列
   activeSheet.SetFreeze('C3');
   /**
    * 第三步   重新绘制表格
    */

   wsheet.BuildSheet();
   wsheet.Draw();

    </code></pre>
    </div>
    <script type="module">
        //let yourElement=document.getElementById("yourElement");
        // window.websheet.hashvalue='66b76806d3d089f20fc92217e3e116722a99c654f6538d9916b266c736ee2314';
        // window.websheet.signList=[{domian:'localhost',company:'websheet',signvalue:'1C7dwqFVAEq504alFHIN6cRkeiJuob2cnMSYhJ9cB99dgCl1xqqrywYSkivqnpPue03ySREJbLB7+B5EyxLEBMNgidLCMCmM68jSFAcJQzFQekXjQvIPMCMHR9EB3U3E'},]


        let yourElement = document.getElementById("yourElement");
       let wsheet = new websheet('HTML', yourElement, 0, 0, document.documentElement.clientWidth * 0.99, document.documentElement.clientHeight*0.6);




        /**
         * 第一步 获取激活的activeSheet
         */
        let activeSheet = wsheet.ActiveSheet();
        let i = 1;
        activeSheet.SetCellValue(3, i, i++);
        activeSheet.SetCellValue(3, i, i++);
        activeSheet.SetCellValue(3, i, i++);
        activeSheet.SetCellValue(3, i, i++);
        activeSheet.SetCellValue(3, i, i++);
        activeSheet.SetCellValue(3, i, i++);
        activeSheet.SetCellValue(3, i, i++);
        activeSheet.SetCellValue(3, i, i++);
        activeSheet.SetCellValue(3, i, i++);
        activeSheet.SetCellValue(3, i, i++);
        let r = 1;
        activeSheet.SetCellValue(r, 3, r++);
        activeSheet.SetCellValue(r, 3, r++);
        activeSheet.SetCellValue(r, 3, r++);
        activeSheet.SetCellValue(r, 3, r++);
        activeSheet.SetCellValue(r, 3, r++);
        activeSheet.SetCellValue(r, 3, r++);
        activeSheet.SetCellValue(r, 3, r++);
        activeSheet.SetCellValue(r, 3, r++);
        activeSheet.SetCellValue(r, 3, r++);
        activeSheet.SetCellValue(r, 3, r++);
        /**
        * 第二步    锁定行列
        */
        //锁定前3行
        // activeSheet.SetFreezeRow(3);
        //锁定前3列
        //activeSheet.SetFreezeCol(3);
        //锁定前C3列
        activeSheet.SetFreeze('C3');
        /**
         * 第三步   重新绘制表格
         */

        wsheet.BuildSheet();
        wsheet.Draw();

    </script>


   <script src="./dist/highlight.min.js"></script>
    <script src="./dist/highlightjs-line-numbers.min.js"></script>

    <script>

        // 高亮代码并添加行号
        document.addEventListener('DOMContentLoaded', () => {
            hljs.highlightAll();
            // 添加行号（支持 CSS 选择器）
            hljs.initLineNumbersOnLoad();
        });



        document.querySelectorAll('.code-container').forEach(container => {
            const btn = container.querySelector('.copy-btn');
            const codeBlock = container.querySelector('code');

            btn.addEventListener('click', () => {
                // 现代浏览器 API（推荐）
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(codeBlock.textContent)
                        .then(() => {
                            btn.textContent = '已复制!';
                            setTimeout(() => btn.textContent = '复制', 1500);
                        });
                }
                // 兼容旧浏览器的降级方案
                else {
                    const textarea = document.createElement('textarea');
                    textarea.value = codeBlock.textContent;
                    document.body.appendChild(textarea);
                    textarea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textarea);
                    btn.textContent = '已复制!';
                    setTimeout(() => btn.textContent = '复制', 1500);
                }
            });
        });

    </script>

<script src="./dist/crypto-js.min.js"></script>
<script src="./dist/jsrsasign-all-min.js"></script>
<script type="text/javascript" src="./dist/xmlbuilder2.min.js"></script>
<script type="text/javascript" src="./dist/websheet.umd.js"></script>
</body>

</html>